<template>
    <div class="carousel_area">
        <div ref="myCarousel" class="carousel_slides">

            <Carouselslide class="pre" :rc_video="rc_videos[this.slideNum - 1]"></Carouselslide>
            <Carouselslide v-for="(rc_video, index) in rc_videos" :key="rc_video.vid" :index="index"
                :rc_video="rc_video"></Carouselslide>
            <Carouselslide class="last" :rc_video="rc_videos[0]"></Carouselslide>
        </div>
        <div class="carousel_footer">
            <div class="carousel_footer_mask"></div>
            <div class="carousel_footer_text">
                <div class="carousel_footer_title">
                    <a href="">
                        <span ref="rc_video_title">{{ title }}</span>
                    </a>
                </div>
            </div>
            <div class="carousel_dots">
                <ul class="carousel_dots_list">
                    <li v-for="(dot, index) in dots" :key="index"
                        :class="{ 'carousel_dots_dot': true, 'active': index === activeIndex }"
                        @click="setActive(index)">
                    </li>
                </ul>
            </div>
        </div>

        <div class="carousel_arrows">
            <button @click="handlePreSlide">
                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1453"
                    xmlns:xlink="http://www.w3.org/1999/xlink">
                    <path
                        d="M330.666667 512c0-14.933333 4.266667-29.866667 14.933333-40.533333l234.666667-277.33333399c23.466667-27.733333 64-29.866667 89.6-8.53333301 27.733333 23.466667 29.866667 64 8.53333299 89.6L477.866667 512l200.53333299 236.8c23.466667 27.733333 19.19999999 68.266667-8.53333299 89.6-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333301l-234.666667-277.33333399c-10.666667-10.666667-14.933333-25.6-14.933333-40.533333z"
                        fill="#fff" p-id="1454"></path>
                </svg>
            </button>
            <button @click="handelNextSide">
                <svg style="transform: rotate(180deg);" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1453" xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="200" height="200">
                    <path
                        d="M330.666667 512c0-14.933333 4.266667-29.866667 14.933333-40.533333l234.666667-277.33333399c23.466667-27.733333 64-29.866667 89.6-8.53333301 27.733333 23.466667 29.866667 64 8.53333299 89.6L477.866667 512l200.53333299 236.8c23.466667 27.733333 19.19999999 68.266667-8.53333299 89.6-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333301l-234.666667-277.33333399c-10.666667-10.666667-14.933333-25.6-14.933333-40.533333z"
                        fill="#fff" p-id="1454"></path>
                </svg>
            </button>
        </div>
    </div>
</template>
<script>
import Carouselslide from './carouselslide.vue';
export default {
    data() {
        return {
            activeIndex: 0,
            slideNum: this.rc_videos.length,
            carouselInterval: null,
            isAutoPlaying:true,
            restartTimeout:null,
            title:""
        };
    },
    props: {
        rc_videos: {
            require: true,
            type: Array,
            default: (() => { })
        }
    },
    //     computed: {
    //     slidesTrans() {
    //       return `translateX(-${this.activeIndex * 100}%)`;
    //     }
    //   },
    created() {
        this.dots = Array.from({ length: this.rc_videos.length });
    },
    mounted() {
        this.title = this.rc_videos[0].title;
        this.autocarousel();
    },
    beforeUnmounted(){
        this.stopAutoPlaying();
        clearTimeout(this.restartTimeout);
    },
    components: {
        Carouselslide
    },
    methods: {
        autocarousel() {
            // 清除之前的定时器（如果有）
            if (this.carouselInterval) {
                clearInterval(this.carouselInterval);
            }
            // 设置新的定时器
            this.carouselInterval = setInterval(() => {
                this.nextSide();
            }, 3000);
        },
        preSlide() {
            if (this.activeIndex === 0) {
                this.$refs.myCarousel.style.transition = 'none'
                this.$refs.myCarousel.style.transform = `translateX(-${(this.slideNum) * 100}%)`;
                requestAnimationFrame(()=>{
                    this.activeIndex = this.slideNum - 1;
                    this.moveTo(this.activeIndex);
                })
                this.title = this.rc_videos[this.activeIndex].title;
            } else {
                this.activeIndex -= 1;
                this.moveTo(this.activeIndex);
                this.title = this.rc_videos[this.activeIndex].title;
            }
        },
        nextSide() {
            if (this.activeIndex === this.slideNum - 1) {
                this.$refs.myCarousel.style.transition = 'none'
                this.$refs.myCarousel.style.transform = 'translateX(100%)';
                this.activeIndex = (this.activeIndex + 1) % this.slideNum;
                this.$refs.myCarousel.clientWidth;
                this.moveTo(this.activeIndex);
                this.title = this.rc_videos[this.activeIndex].title;
            } else {
                this.activeIndex += 1;
                this.moveTo(this.activeIndex);
                this.title = this.rc_videos[this.activeIndex].title;
            }
        },
        setActive(index) {
            this.activeIndex = index;
            this.moveTo(index)
        },
        moveTo(index) {
            this.$refs.myCarousel.style.transition = '.3s';
            this.$refs.myCarousel.style.transform = `translateX(-${index * 100}%)`;
        },
        stopAutoPlaying(){
            if(this.carouselInterval){
                clearInterval(this.carouselInterval);
                this.carouselInterval = null;
            };
            this.isAutoPlaying = false;
        },
        restartAutoPlaying(delay = 5000){
            if(this.restartTimeout){
                clearTimeout(this.restartTimeout);
                this.restartTimeout = null;
            }
            this.restartTimeout = setTimeout(() => {
            this.autocarousel();
            this.restartTimeout = null;
            }, delay);
        },
        handlePreSlide(){
            this.stopAutoPlaying();
            this.preSlide();
            this.restartAutoPlaying();
        },
        handelNextSide(){
            this.stopAutoPlaying();
            this.nextSide();
            this.restartAutoPlaying();
        }
    }
}
</script>
<style scoped>
a{
    text-decoration: none;
}
.container .carousel_area {
    grid-row: 1/3;
    grid-column: 1/3;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

.carousel_area .carousel_slides {
    display: flex;
}

.carousel_area img {
    width: 100%;
}

.pre {
    margin-left: -100%;
}

.carousel_area .carousel_footer .carousel_footer_mask {
    width: 100%;
    height: 392px;
    position: absolute;
    bottom: 75px;
    background: linear-gradient(0, #9499A0 20%, transparent 30%);
    border-radius: 6px;
}
.carousel_footer_text{
    position: relative;
    z-index: 2;
}
.carousel_footer_title{
    margin-left: 20px;
    margin-top: 5px;
}
.carousel_footer_title a span{
    color: #fff;
    font-size: 20px;
    font-family:"楷体";
}


.carousel_dots {
    position: absolute;
    bottom: 70px;
    z-index: 2;
}

.carousel_dots .carousel_dots_list {
    list-style: none;
    padding-inline-start: 10px;
    display: flex;
    align-items: center;
}

.carousel_dots .carousel_dots_list .carousel_dots_dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    margin: 4px;
    transition: .3s;
    background-color: rgba(255, 255, 255, .4);
}

.carousel_dots .carousel_dots_list .active {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .8);
}

.carousel_arrows {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    bottom: 100px;
    right: 15px;
}

.carousel_arrows button {
    display: flex;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    margin-right: 12px;
    background-color: rgba(255, 255, 255, .1);
    border: none;
}

.carousel_arrows button:hover {
    background-color: rgba(255, 255, 255, .4);
}

.carousel_arrows button svg {
    color: #ffffff;
    width: 12px;
    height: 12px;
    font-weight: 800;
}
</style>